<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>监管行为分析</title>
    <script src="../js/header.js"></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            width:100%;
            height: 100%;
        }

        #main {
            /*width:800px;*/
            width: 100%;
            height: 600px;
            margin: 50px auto;
        }

        #barchart {
            /*width:800px;*/
            width: 100%;
            height: 250px;
            margin: 20px auto;
        }

        #piechart {
            /*width:800px;*/
            width: 100%;
            height: 300px;
            margin: 0px auto;
        }

        .echarts_wrap {
            /*padding: 0 10px;*/
            background: #FFFFFF;
            border: 1px solid #F3F3F3;
            box-shadow: 0 3px 3px 0 #EDEBEB;
        }

        /*建议长宽比0.75，符合审美*/
        .tab-title {
            font-size: 16px;
            font-weight: bold;
            font-family: PingFangSC-Medium;
            padding-left: 10px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .qyxyzl-list {
            margin-top: 20px;
            background: #FFFFFF;
            box-shadow: 2px 0 4px 2px #ECECEC;
            border: 1px solid #ddd;
            border-radius: 100%;
            text-align: center;
        }

        .qyxyzl-counts {
            font-family: PingFangSC-Medium;
            font-size: 24px;
            color: #696969;
            letter-spacing: 0;
            /*text-align: center;*/
        }

        .qyxyzl-name {
            margin-top: 5px;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: #696969;
            letter-spacing: 0;
            /*text-align: center;*/
        }

        .qyxyzl-list>div {
            display: inline-block;
            padding: 116px 0;
        }

        .qyxyzl-list>div::after {
            content: '';
            display: block;
            clear: both;
        }

        #dialog{
            /*padding-top: 10px;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-right: 20px;*/
            height: 250px;
            width: 100%;
        }
        .dialog{
            height: 200px;
            width: 200px;
            margin: auto;
            background: #0000ff;
            /* box-shadow: 2px 0 4px 2px #ECECEC;*/
            border: 0px solid #ddd;
            border-radius: 100%;
            /* text-align: center;*/
            /*positiion:absolute;*/
        }
        .dialog_num{
            height:100px;
            width: 100px;
            margin: auto;
            padding: 50px 50px;
            text-align: center;
            line-height: 100px;
            font-size: 25px;
            color: #fff4f7;

        }
    </style>
</head>
<body>
<div id="app">
    <el-row :gutter="20">
        <el-col :span="12" class="echarts_wrap">
            <el-row style="border-bottom: 1px solid #ddd;">
                <el-col class="tab-title">
                    <img src="../images/quyusaomiao.png" style="vertical-align: middle;" />
                    <span style="vertical-align: middle;">区域信用统计</span>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <div id="main"></div>
                </el-col>
            </el-row>
        </el-col>
        <el-col :span="12" style="height: 748px;">
            <el-row>
                <el-col style="height: 374px;" class="echarts_wrap">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/ico_xinyon.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">企业信用总览</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div id="barchart"></div>
                        </el-col>
                    </el-row>
                </el-col>
                <el-col class="echarts_wrap" style="margin-top: 10px;height: 364px;">
                    <el-row style="border-bottom: 1px solid #ddd;">
                        <el-col class="tab-title">
                            <img src="../images/tongji.png" style="vertical-align: middle;" />
                            <span style="vertical-align: middle;">企业信用统计</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <div id="piechart"></div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </el-col>
    </el-row>

    <el-dialog
            title=""
            :visible.sync="dialogTableVisible"
            center="true"
            width="45%">
        <div>
            <el-row>
                <!-- <el-col>{{ city.cityName }}</el-col>
                 <el-col>监管对象分析数据： {{ city.cityObject }}</el-col>
                 <el-col>监管行为分析数据： {{ city.cityAction }}</el-col>
                 <el-col>宣传教育分析数据： {{ city.cityEducation }}</el-col>-->
                <el-col style="height: 30px;text-align: center;">北京市</el-col>
                <el-col >
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">总数</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">300</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row id="dialog">
                            <el-col style=" height: 30px;text-align: center;">占全国比例</el-col>
                            <el-col >
                                <div class="dialog">
                                    <div class="dialog_num">12%</div>
                                </div>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-col>
            </el-row>
        </div>
    </el-dialog>
</div>
</body>
<script>
    var UIEcharts = new Vue({
        el: '#app',
        /* data(){
            return{
                // setHeight: `$(document.documentElement.clientHeight)`
                setHeight: window.innerHeight + 'px',
                setHeight2: (window.innerHeight)/2 - 57 + 'px'
            }
        }, */
        data(){
            return{
                dialogTableVisible: false,
                city: {
                    cityName: '',
                    cityNum: 212312,
                    cityObject: 12332, // 监管对象数据
                    cityAction: 3242, // 监管行为数据
                    cityEducation: 123 // 宣传教育数据
                }
            }
        },
        mounted() {
            this.mapFn();
            this.pieChart();
            this.barChart();
            // this.setHeight = document.documentElement.clientHeight;
            /*var _this = this;
            _this.setHeight = 200;*/
            //挂载浏览器高度获取方法
            const that = this;
            window.onresize = () => {
                return (() => {
                    that.setHeight = window.innerHeight + 'px'
            })()
            }

            // this.$refs.nav.style.height=this.winHeight+'px'
            console.log(this.setHeight);
        },
        watch: {
            //监控浏览器高度变化
            winHeight(val) {
                this.setHeight = val + 'px';
                // this.$refs.nav.style.height=this.winHeight+'px'
            }
        },
        methods: {
            mapFn() {
                var dataList = [
                    {
                        name: "南海诸岛",
                        value: 0
                    },
                    {
                        name: '北京',
                        value: randomValue()
                    },
                    {
                        name: '天津',
                        value: randomValue()
                    },
                    {
                        name: '上海',
                        value: randomValue()
                    },
                    {
                        name: '重庆',
                        value: randomValue()
                    },
                    {
                        name: '河北',
                        value: randomValue()
                    },
                    {
                        name: '河南',
                        value: randomValue()
                    },
                    {
                        name: '云南',
                        value: randomValue()
                    },
                    {
                        name: '辽宁',
                        value: randomValue()
                    },
                    {
                        name: '黑龙江',
                        value: randomValue()
                    },
                    {
                        name: '湖南',
                        value: randomValue()
                    },
                    {
                        name: '安徽',
                        value: randomValue()
                    },
                    {
                        name: '山东',
                        value: randomValue()
                    },
                    {
                        name: '新疆',
                        value: randomValue()
                    },
                    {
                        name: '江苏',
                        value: randomValue()
                    },
                    {
                        name: '浙江',
                        value: randomValue()
                    },
                    {
                        name: '江西',
                        value: randomValue()
                    },
                    {
                        name: '湖北',
                        value: randomValue()
                    },
                    {
                        name: '广西',
                        value: randomValue()
                    },
                    {
                        name: '甘肃',
                        value: randomValue()
                    },
                    {
                        name: '山西',
                        value: randomValue()
                    },
                    {
                        name: '内蒙古',
                        value: randomValue()
                    },
                    {
                        name: '陕西',
                        value: randomValue()
                    },
                    {
                        name: '吉林',
                        value: randomValue()
                    },
                    {
                        name: '福建',
                        value: randomValue()
                    },
                    {
                        name: '贵州',
                        value: randomValue()
                    },
                    {
                        name: '广东',
                        value: randomValue()
                    },
                    {
                        name: '青海',
                        value: randomValue()
                    },
                    {
                        name: '西藏',
                        value: randomValue()
                    },
                    {
                        name: '四川',
                        value: randomValue()
                    },
                    {
                        name: '宁夏',
                        value: randomValue()
                    },
                    {
                        name: '海南',
                        value: randomValue()
                    },
                    {
                        name: '台湾',
                        value: randomValue()
                    },
                    {
                        name: '香港',
                        value: randomValue()
                    },
                    {
                        name: '澳门',
                        value: randomValue()
                    }
                ]
                var myChart = echarts.init(document.getElementById('main'));
                var $this = this;

                function randomValue() {
                    return Math.round(Math.random() * 1000);
                }
                option = {
                    tooltip: {
                        formatter: function(params, ticket, callback) {
                            return params.seriesName + '<br />' + params.name + '：' + params.value
                        } //数据格式化
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'], //取值范围的文字
                        inRange: {
                            color: ['#e0ffff', '#006edd'] //取值范围的颜色
                        },
                        show: false //图注
                    },
                    geo: {
                        map: 'china',
                        roam: false, //不开启缩放和平移
                        zoom: 1.23, //视角缩放比例
                        label: {
                            normal: {
                                show: true,
                                fontSize: '10',
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis: {
                                areaColor: '#F3B329', //鼠标选择区域颜色
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series: [{
                        name: '信息量',
                        type: 'map',
                        geoIndex: 0,
                        data: dataList
                    }]
                };
                myChart.setOption(option);
                /*myChart.on('click', function (params) {
                            alert(params.name);
                          });*/
                // 地图点击事件
                myChart.on('click', function (params) {
                    $this.dialogTableVisible = true;
                    // cityname = params.name;
                    // alert(params.name);
                });
            },
            barChart() {
                option = {
                    /*title: {
                        text: '世界人口总量',
                        subtext: '数据来自网络'
                    },*/
                    /* tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    }, */
                    /* legend: {
                        data: ['2011年', '2012年']
                    }, */
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        show: true,
                        type: 'category',
                        data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局'],
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        show: true,
                        type: 'value',
                        /* data: ['A类企业', 'B类企业', 'C类企业', 'D类企业', 'E类企业', 'F类企业'], */
                        /* //隐藏刻度尺
                        axisTick: {
                            show: false
                        }, */
                        //隐藏坐标线
                        /* axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#000000'
                            }
                        }, */
                    },
                    series: [{
                        /* name: '2011年', */
                        type: 'bar',
                        itemStyle: {
                            borderWidth: {},
                            normal: {
                                //控制柱状图颜色，定义一个list，然后根据所以取得不同的值
                                color: function(params) {
                                    var colorList = [
                                        '#C1232B', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                        '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                        '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#26C0C0'
                                    ];
                                    return colorList[params.dataIndex]
                                },

                            },
                        },
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    }]
                };
                var barChart = echarts.init(document.getElementById('barchart'));
                barChart.setOption(option);
            },
            pieChart() {
                option = {
                    /*title: {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        left: 'center'
                    },*/
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c} ({d}%)'
                    },
                    /* 	grid: {
                            top: '10%', //距上边距
                            left: '10%', //距离左边距
                            right: '10%', //距离右边距
                            bottom: '10%', //距离下边距
                            containLabel: true
                        }, */
                    legend: {
                        orient: 'horizontal',
                        /* x: 'center', //可设定图例在左、右、居中
                        y: 'bottom', //可设定图例在上、下、居中 */
                        bottom: 'bottom',
                        padding: [10, 50, 0, 0],
                        data: ['北京局', '天津局', '河北局', '山西局', '内蒙古局', '辽宁局']
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: '80%',
                        /* center: ['50%', '50%'], */
                        label: {
                            normal: {
                                show: 'false',
                                position: 'inside',
                                formatter: '{d}%'
                            }
                        },
                        data: [{
                            value: 335,
                            name: '北京局'
                        },
                            {
                                value: 310,
                                name: '天津局'
                            },
                            {
                                value: 234,
                                name: '河北局'
                            },
                            {
                                value: 135,
                                name: '山西局'
                            },
                            {
                                value: 1548,
                                name: '辽宁局'
                            },
                            {
                                value: 1548,
                                name: '内蒙古局'
                            }
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                var pieChart = echarts.init(document.getElementById('piechart'));
                pieChart.setOption(option);
            }
        }
    })
</script>
</html>
